<template>
  <!-- 左上角 -->
  <div class="base-chart">
    <div class="base-background">
      <div class="base-h-l"></div>
      <div class="base-h-r"></div>
    </div>
    <div class="base-frame-img">
      <div class="box-title">
        <div class="box-t-icon"></div>
        <div class="box-t-text">灯具情况统计</div>
      </div>
      <div class="box-content">
        <div class="L-item-box" v-for="(item, index) in detailList" :key="item.id + index">
          <div class="liang-deng">
            <div class="liang-deng-icon">
              <img class="effectposition maindataeffect" src="/src/assets/wbe4/maindataeffect.png">
              <div class="effectposition acrossremindeffectout" style=" width: 76px; height: 76px; margin: 9px;">
                <div class="qiu-icon">
                </div>
              </div>
              <img class="effectposition maindataspecialeffect" src="/src/assets/wbe4/maindataspecialeffect.png">
              <img class="qiu-icon-icon" :src="index == 1 ? iconDJ : iconWG">
            </div>
            <div class="liang-deng-text">{{ item.label }}</div>
          </div>
          <div style="height: 0.5vh;border-bottom: 1px dashed #957373;"></div>
          <div style="margin-left: 1vw;width: 100%;">
            <ItemLabel v-for="(cItem, cIndex) in item.list" :key="item.id + index + cIndex" :labelValue="cItem.val"
              :labelName="cItem.label" :iconName="cItem.icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useBigScreenStore } from "@/pinia/bigScreen";
import ItemLabel from "../iconbox/ItemLabel.vue";
import iconDJ from "@/assets/wbe4/iconDJ.png";
import iconWG from "@/assets/wbe4/iconWG.png";
import { getLightingRateData } from '@/api/homepageApi'
const bsStore = useBigScreenStore();

let detailList = ref([
  {
    id: 'lanternsChart1',
    label: '灯具',
    list: [
      { icon: 'icon-box-1', label: '亮灯', val: 0 },
      { icon: 'icon-box-2', label: '总数', val: 0 }
    ]
  },
  {
    id: 'lanternsChart2',
    label: '网关',
    list: [
      { icon: 'icon-box-3', label: '在线', val: 0 },
      { icon: 'icon-box-4', label: '离线', val: 0 }
    ]
  }
])

onBeforeMount(() => { })

onMounted(() => { });

watch(() => bsStore.projectId, (newValue, oldValue) => {
  if (newValue === 'all') {
    // 累加 亮灯、总数、在线、离线
    // if (localStorage.getItem("big_LanternsChart_all")) {
    //   detailList.value = JSON.parse(localStorage.getItem("big_LanternsChart_all"))
    // } else {
    integrationAllLsit()
    // }
  } else {
    integrationData()
  }
})

const integrationData = () => {
  getLightingNum(bsStore.project.id)
  let obj = { zaixian: 0, lixian: 0 }
  if (bsStore.project) {
    bsStore.project.iotDeviceList.forEach(iot => { iot.deviceStatus == 'ONLINE' ? obj.zaixian++ : obj.lixian++ });
    detailList.value[1].list[0].val = obj.zaixian
    detailList.value[1].list[1].val = obj.lixian
  }
}

const integrationAllLsit = () => {
  getLightingNum(-1)
  let obj = { zaixian: 0, lixian: 0 }
  bsStore.projectList.forEach(el => { el.iotDeviceList.forEach(iot => { iot.deviceStatus == 'ONLINE' ? obj.zaixian++ : obj.lixian++ }) });
  detailList.value[1].list[0].val = obj.zaixian
  detailList.value[1].list[1].val = obj.lixian
  localStorage.setItem("big_LanternsChart_all", JSON.stringify(detailList.value))
}

const getLightingNum = async (str) => {
  let data = await getLightingRateData(str)
  if (data.code === 200) {
    bsStore.project.lds = data.data.LightOn
    bsStore.project.djzs = data.data.LightOn + data.data.LightOff
    let arr = []
    bsStore.projectList.forEach(element => {
      if (element.id === bsStore.project.id) {
        element.lds = data.data.LightOn
        element.djzs = data.data.LightOn + data.data.LightOff
      }
      arr.push(element)
    });
    bsStore.setProjectList(arr)
    localStorage.setItem('big_project', JSON.stringify(bsStore.project))
    detailList.value[0].list[0].val = data.data.LightOn
    detailList.value[0].list[1].val = data.data.LightOn + data.data.LightOff
  }
}

</script>

<style lang="scss" scoped>
.base-background {
  background: url(/src/assets/wbe4/l-bj-1-line.png) center no-repeat;
  background-size: 100% auto;
  position: absolute;
  overflow: hidden;
  padding: 2px 1px;
  cursor: pointer;
  background-color: #003f6f;
  border-radius: 15px;
  opacity: 0.9;
  min-width: 390px;
  min-height: 26rem;
  height: 26vh;
  width: 30em;
  box-shadow: inset 0 0 40px #0fbff3;
  display: flex;
}

.base-h-l {
  background: url(/src/assets/wbe4/l-bj-l-1.png) center no-repeat;
  height: 4rem;
  width: 50%;
  background-color: #000e13;
}

.base-h-r {
  background: url(/src/assets/wbe4/l-bj-r-1.png) center no-repeat;
  height: 4rem;
  width: 50%;
  background-color: #000e13;
}

.base-frame-img {
  position: relative;
  margin-left: 2px;
  padding: 1rem;
  background-size: 100% 100%;
  box-sizing: border-box;
  min-width: 390px;
  min-height: 26rem;
  height: 26vh;
  width: 30em;
}

.box-title {
  display: flex;
}

.box-t-text {
  font-size: 1.4rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 32px;
  margin-left: 3px;
  user-select: none;
}

.box-t-icon {
  width: 32px;
  height: 32px;
  background: url(/src/assets/wbe4/tubiao.png) center no-repeat;
  background-size: 100% 100%;
}

.item-text {
  color: #b9ccd3;
  margin: 0.7vh 0vw;
  font-size: 14px;
}

.box-content {
  color: #fff;
  margin-top: 2vh;

  .L-item-box {
    display: flex;
    border-bottom: 1px dashed #957373;
    margin: 5px 0px;
  }

  .liang-deng-icon {
    border: rgba(0, 168, 255, 0.6) 3px solid;
    width: 94px;
    height: 94px;
    top: 194px;
    left: 430px;
    border-radius: 50%;
    border: rgba(0, 168, 255, 0.6) 1px solid;
    cursor: pointer;
    user-select: none;
  }

  .qiu-icon {
    background-color: rgba(0, 126, 255, 0.3);
    border-radius: 50%;
    margin: auto;
    width: 68px;
    height: 68px;
    margin: 4px;
  }

  .qiu-icon-icon {
    width: 30px;
    height: 30px;
    z-index: 999;
    position: absolute;
    margin: 33px;
  }

  .qiu-text {
    position: absolute;
    margin-top: -46px;
    z-index: 1;
    margin-left: 19px;
  }

  .liang-deng-text {
    text-align: center;
    font-size: 14px;
    margin: 5px;
    font-weight: bold;
  }

  .deng-pao-box {
    width: 15vw;
    height: 5vh;
    background: rgba(15, 47, 72, 0.8);
    border: 1px solid #1380bd;
    position: relative;
    margin-left: 10px;

    .d-p-j {
      position: absolute;
    }

    .d-p-t {
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      line-height: 50px;
      font-size: 22px;
    }

    .d-p-j:first-of-type {
      top: -2px;
      left: -2px;
    }

    .d-p-j:nth-child(2) {
      top: -2px;
      right: -2px;
    }

    .d-p-j:nth-child(3) {
      bottom: -2px;
      right: -2px;
    }

    .d-p-j:nth-child(4) {
      bottom: -2px;
      left: -2px;
    }

    .sfzcll_smallBk {
      width: 33%;
      height: 100%;
      float: left;
      padding: 2px 5px;
    }

    .sfzcll_smallBk .ygl {
      color: #00ffc6;
    }

    .sfzcll_smallBk .ygh {
      color: #ffe400;
    }
  }
}

.detail-item {
  display: block;
  text-align: center;
  user-select: none;
}

.chart-container {
  width: 6vw;
  height: 6vw;
}

.chart-text {
  font-size: 14px;
  color: #FFFFFF;
  font-weight: bold;
}

.detail-item-top {
  margin-top: 2vh;
}

.detail-item-below {
  margin-top: 2vh;
}

.effectposition {
  position: absolute;
  transform: rotate(45deg);
}

.acrossremindeffectout {
  background-color: rgba(0, 126, 255, 0.05);
  border-radius: 50%;
}

.acrossremindeffectoutho {
  background-color: rgba(0, 126, 255, 0.15);
}



.acrossremindeffectinho {
  background-color: rgba(0, 126, 255, 0.45);
}

.stagetitle {
  color: #00e4ff;
  top: 104px;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  font-weight: lighter;
  display: block;
  width: 116px;
  text-align: center;
  position: absolute;
  left: -10%;
}

.stagearoundtitle {
  left: -25%;
  top: 85px;
}

.line {
  position: absolute;
  transform-origin: left;
  animation-iteration-count: infinite
}


.maindataeffect {
  animation: scrolleffect 6.5s infinite linear;
}

.maindataspecialeffectct {
  animation: maindataspecialeffect 0.6s forwards;
}

@keyframes scrolleffect {
  0% {
    transfrom: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes maindataspecialeffect {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.aroundfunctioneffect {
  width: 76px;
  height: 76px;
}

.acrossremindeffectoutard {
  width: 60px;
  height: 60px;
  margin: 8px;
}

.acrossremindeffectinard {
  width: 54px;
  height: 54px;
  margin: 3px;
}

.arounddataeffect01 {
  animation: scrolleffectarround01 linear infinite 4s forwards;
}

.arounddataeffect02 {
  animation: scrolleffectarround01 linear infinite 3.8s forwards;
}

.arounddataeffect03 {
  animation: scrolleffectarround01 linear infinite 4.2s forwards;
}

@keyframes scrolleffectarround01 {
  0% {
    transfrom: rotate(0deg);
  }

  25% {
    transform: rotate(-90deg);
  }

  50% {
    transform: rotate(-180deg);
  }

  75% {
    transform: rotate(-270deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>